<template>
	<view class="order-detail-container">
		<!-- 订单状态 -->
		<view class="status-section">
			<view class="status-card">
				<view class="status-icon" :class="getStatusClass(orderDetail.status)">
					<u-icon name="checkmark-circle" size="60" color="#fff"/>
				</view>
				<view class="status-info">
					<text class="status-text">{{ getStatusText(orderDetail.status) }}</text>
					<text class="status-desc">{{ getStatusDesc(orderDetail.status) }}</text>
				</view>
			</view>
		</view>

		<!-- 订单基本信息 -->
		<view class="info-section">
			<view class="section-title">订单信息</view>
			<view class="info-card">
				<view class="info-item">
					<text class="label">订单号</text>
					<text class="value">{{ orderDetail.orderNumber }}</text>
				</view>
				<view class="info-item">
					<text class="label">创建时间</text>
					<text class="value">{{ orderDetail.createdAt }}</text>
				</view>
				<view class="info-item">
					<text class="label">支付时间</text>
					<text class="value">{{ orderDetail.paidAt || '未支付' }}</text>
				</view>
				<view class="info-item">
					<text class="label">订单状态</text>
					<text class="value status-tag" :class="getStatusClass(orderDetail.status)">
						{{ getStatusText(orderDetail.status) }}
					</text>
				</view>
			</view>
		</view>

		<!-- 设备信息 -->
		<view class="info-section">
			<view class="section-title">设备信息</view>
			<view class="device-card" @click="goToDeviceDetail(orderDetail.device.id)">
				<image :src="orderDetail.device.image" class="device-image" mode="aspectFill"/>
				<view class="device-info">
					<text class="device-name">{{ orderDetail.device.name }}</text>
					<text class="device-model">{{ orderDetail.device.model }}</text>
					<text class="device-spec">{{ orderDetail.device.specifications }}</text>
					<view class="device-price">
						<text class="price">¥{{ orderDetail.device.price }}/天</text>
						<text class="deposit">押金: ¥{{ orderDetail.device.deposit }}</text>
					</view>
				</view>
				<u-icon name="arrow-right" size="32" color="#999"/>
			</view>
		</view>

		<!-- 租赁信息 -->
		<view class="info-section">
			<view class="section-title">租赁信息</view>
			<view class="info-card">
				<view class="info-item">
					<text class="label">租赁时间</text>
					<text class="value">{{ orderDetail.startDate }} 至 {{ orderDetail.endDate }}</text>
				</view>
				<view class="info-item">
					<text class="label">租赁天数</text>
					<text class="value">{{ orderDetail.rentalDays }}天</text>
				</view>
				<view class="info-item">
					<text class="label">设备数量</text>
					<text class="value">{{ orderDetail.quantity }}台</text>
				</view>
				<view class="info-item">
					<text class="label">配送地址</text>
					<text class="value">{{ orderDetail.deliveryAddress }}</text>
				</view>
				<view class="info-item">
					<text class="label">联系人</text>
					<text class="value">{{ orderDetail.contactName }} {{ orderDetail.contactPhone }}</text>
				</view>
				<view class="info-item">
					<text class="label">租赁用途</text>
					<text class="value">{{ orderDetail.purpose }}</text>
				</view>
				<view class="info-item" v-if="orderDetail.specialRequirements">
					<text class="label">特殊要求</text>
					<text class="value">{{ orderDetail.specialRequirements }}</text>
				</view>
			</view>
		</view>

		<!-- 费用明细 -->
		<view class="info-section">
			<view class="section-title">费用明细</view>
			<view class="cost-card">
				<view class="cost-item">
					<text class="label">设备租金</text>
					<text class="value">¥{{ orderDetail.rentalFee }}</text>
				</view>
				<view class="cost-item">
					<text class="label">设备押金</text>
					<text class="value">¥{{ orderDetail.depositAmount }}</text>
				</view>
				<view class="cost-item" v-if="orderDetail.deliveryFee > 0">
					<text class="label">配送费</text>
					<text class="value">¥{{ orderDetail.deliveryFee }}</text>
				</view>
				<view class="cost-item" v-if="orderDetail.installationFee > 0">
					<text class="label">安装费</text>
					<text class="value">¥{{ orderDetail.installationFee }}</text>
				</view>
				<view class="cost-divider"></view>
				<view class="cost-item total">
					<text class="label">总计</text>
					<text class="value">¥{{ orderDetail.totalAmount }}</text>
				</view>
			</view>
		</view>

		<!-- 订单操作 -->
		<view class="actions-section">
			<view class="action-buttons">
				<u-button 
					v-if="orderDetail.status === 'PENDING'"
					type="error" 
					size="large"
					@click="cancelOrder"
				>
					取消订单
				</u-button>
				<u-button 
					v-if="orderDetail.status === 'CONFIRMED'"
					type="warning" 
					size="large"
					@click="startRental"
				>
					开始租赁
				</u-button>
				<u-button 
					v-if="orderDetail.status === 'IN_PROGRESS'"
					type="success" 
					size="large"
					@click="returnDevice"
				>
					归还设备
				</u-button>
				<u-button 
					v-if="orderDetail.status === 'COMPLETED' && !orderDetail.hasReview"
					type="primary" 
					size="large"
					@click="writeReview"
				>
					评价订单
				</u-button>
				<u-button 
					type="info" 
					size="large"
					@click="contactOwner"
				>
					联系出租方
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import apiService from '@/api/index.js'

export default {
	data() {
		return {
			orderId: null,
			orderDetail: {
				id: 1,
				orderNumber: 'MVR202401001',
				status: 'IN_PROGRESS',
				createdAt: '2024-01-10 14:30:00',
				paidAt: '2024-01-10 15:00:00',
				device: {
					id: 1,
					name: 'MVR蒸发器-001',
					model: 'MVR-500L',
					specifications: '处理能力: 500L/h, 蒸发温度: 60-80℃',
					image: '/static/device-sample.jpg',
					price: 800,
					deposit: 5000
				},
				startDate: '2024-01-15',
				endDate: '2024-01-25',
				rentalDays: 10,
				quantity: 1,
				deliveryAddress: '北京市朝阳区建国门外大街1号',
				contactName: '张三',
				contactPhone: '13800138000',
				purpose: '工业废水处理',
				specialRequirements: '需要专业技术人员现场指导',
				rentalFee: 8000,
				depositAmount: 5000,
				deliveryFee: 500,
				installationFee: 1000,
				totalAmount: 14500,
				hasReview: false
			}
		}
	},
	onLoad(options) {
		this.orderId = options.id
		this.loadOrderDetail()
	},
	methods: {
		// 加载订单详情
		async loadOrderDetail() {
			try {
				uni.showLoading({ title: '加载中...' })
				
				// TODO: 替换为真实API调用
				// const response = await apiService.order.getOrderDetail(this.orderId)
				// this.orderDetail = response.data
				
				// 模拟API调用
				await new Promise(resolve => setTimeout(resolve, 1000))
				
				uni.hideLoading()
			} catch (error) {
				console.error('加载订单详情失败:', error)
				uni.hideLoading()
				uni.showToast({ title: '加载失败', icon: 'none' })
			}
		},
		
		// 跳转到设备详情
		goToDeviceDetail(deviceId) {
			uni.navigateTo({
				url: `/pages/devices/detail?id=${deviceId}`
			})
		},
		
		// 取消订单
		async cancelOrder() {
			try {
				const result = await this.showConfirmDialog('确定要取消这个订单吗？取消后押金将原路退回。')
				if (result.confirm) {
					uni.showLoading({ title: '处理中...' })
					
					// TODO: 调用取消订单API
					// await apiService.order.cancelOrder(this.orderId)
					
					await new Promise(resolve => setTimeout(resolve, 1000))
					
					uni.hideLoading()
					uni.showToast({ title: '订单已取消', icon: 'success' })
					
					// 刷新订单详情
					this.loadOrderDetail()
				}
			} catch (error) {
				console.error('取消订单失败:', error)
				uni.hideLoading()
				uni.showToast({ title: '取消失败', icon: 'none' })
			}
		},
		
		// 开始租赁
		async startRental() {
			try {
				const result = await this.showConfirmDialog('确认开始租赁？设备将按约定时间配送。')
				if (result.confirm) {
					uni.showLoading({ title: '处理中...' })
					
					// TODO: 调用开始租赁API
					// await apiService.order.startRental(this.orderId)
					
					await new Promise(resolve => setTimeout(resolve, 1000))
					
					uni.hideLoading()
					uni.showToast({ title: '租赁已开始', icon: 'success' })
					
					// 刷新订单详情
					this.loadOrderDetail()
				}
			} catch (error) {
				console.error('开始租赁失败:', error)
				uni.hideLoading()
				uni.showToast({ title: '操作失败', icon: 'none' })
			}
		},
		
		// 归还设备
		async returnDevice() {
			try {
				const result = await this.showConfirmDialog('确认归还设备？归还后押金将原路退回。')
				if (result.confirm) {
					uni.showLoading({ title: '处理中...' })
					
					// TODO: 调用归还设备API
					// await apiService.order.returnDevice(this.orderId)
					
					await new Promise(resolve => setTimeout(resolve, 1000))
					
					uni.hideLoading()
					uni.showToast({ title: '设备已归还', icon: 'success' })
					
					// 刷新订单详情
					this.loadOrderDetail()
				}
			} catch (error) {
				console.error('归还设备失败:', error)
				uni.hideLoading()
				uni.showToast({ title: '归还失败', icon: 'none' })
			}
		},
		
		// 评价订单
		writeReview() {
			uni.navigateTo({
				url: `/pages/orders/review?id=${this.orderId}`
			})
		},
		
		// 联系出租方
		contactOwner() {
			uni.showActionSheet({
				itemList: ['拨打电话', '发送消息'],
				success: (res) => {
					if (res.tapIndex === 0) {
						// 拨打电话
						uni.makePhoneCall({
							phoneNumber: '13800138000'
						})
					} else if (res.tapIndex === 1) {
						// 发送消息
						uni.showToast({ title: '消息功能开发中', icon: 'none' })
					}
				}
			})
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			const statusMap = {
				'PENDING': 'pending',
				'CONFIRMED': 'confirmed',
				'IN_PROGRESS': 'in-progress',
				'COMPLETED': 'completed',
				'CANCELLED': 'cancelled'
			}
			return statusMap[status] || 'pending'
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				'PENDING': '待确认',
				'CONFIRMED': '已确认',
				'IN_PROGRESS': '进行中',
				'COMPLETED': '已完成',
				'CANCELLED': '已取消'
			}
			return statusMap[status] || '未知状态'
		},
		
		// 获取状态描述
		getStatusDesc(status) {
			const statusMap = {
				'PENDING': '等待出租方确认订单',
				'CONFIRMED': '订单已确认，准备配送设备',
				'IN_PROGRESS': '设备租赁中，请按时归还',
				'COMPLETED': '租赁已完成，感谢您的使用',
				'CANCELLED': '订单已取消'
			}
			return statusMap[status] || '订单处理中'
		},
		
		// 显示确认对话框
		showConfirmDialog(content) {
			return new Promise((resolve) => {
				uni.showModal({
					title: '确认操作',
					content,
					success: resolve
				})
			})
		}
	}
}
</script>

<style scoped>
.order-detail-container {
	background: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.status-section {
	padding: 40rpx 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.status-card {
	display: flex;
	align-items: center;
	gap: 30rpx;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20rpx;
	padding: 40rpx;
	backdrop-filter: blur(10rpx);
}

.status-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
}

.status-info {
	flex: 1;
}

.status-text {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: white;
	margin-bottom: 10rpx;
}

.status-desc {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
}

.info-section {
	margin: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	border-left: 8rpx solid #007aff;
}

.info-card {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
	border-bottom: none;
}

.label {
	font-size: 28rpx;
	color: #666;
}

.value {
	font-size: 28rpx;
	color: #333;
	text-align: right;
	max-width: 60%;
}

.status-tag {
	padding: 6rpx 16rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
}

.status-tag.pending {
	background: #fff7e6;
	color: #fa8c16;
}

.status-tag.confirmed {
	background: #e6f7ff;
	color: #1890ff;
}

.status-tag.in-progress {
	background: #f6ffed;
	color: #52c41a;
}

.status-tag.completed {
	background: #f0f0f0;
	color: #666;
}

.status-tag.cancelled {
	background: #fff2f0;
	color: #ff4d4f;
}

.device-card {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.device-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
}

.device-info {
	flex: 1;
}

.device-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.device-model {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.device-spec {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 12rpx;
}

.device-price {
	display: flex;
	gap: 20rpx;
}

.price {
	font-size: 30rpx;
	font-weight: bold;
	color: #ff6600;
}

.deposit {
	font-size: 26rpx;
	color: #666;
}

.cost-card {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
}

.cost-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.cost-item.total {
	border-top: 2rpx solid #f0f0f0;
	margin-top: 20rpx;
	padding-top: 30rpx;
}

.cost-item.total .label {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.cost-item.total .value {
	font-size: 36rpx;
	font-weight: bold;
	color: #ff6600;
}

.cost-divider {
	height: 1rpx;
	background: #f0f0f0;
	margin: 20rpx 0;
}

.actions-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	border-top: 1rpx solid #f0f0f0;
	padding: 20rpx;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
}

.action-buttons .u-button {
	flex: 1;
}
</style> 